<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>后台管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" type="image/x-icon" href="/plugin/favicon.ico">
    <link rel="stylesheet" href="/plugin/elementUI/elementUI.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">
    <style>
        html,
        body { height: 100%; padding: 0; margin: 0; }
        .outer { height: 100%; box-sizing: border-box ; position: relative;}
        .frame {width: 100%; height: 100%;border: none;}
    </style>
</head>
<body>
    <div class="outer" >
        <el-row :gutter="0" style="background-color: #324157">
            <el-col :span="4">
                <el-menu theme="dark" mode="horizontal" >
                    <el-menu-item index="1">后台管理系统</el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="16">
                <el-menu theme="dark" mode="horizontal" >
                    <el-menu-item index="3"><div id="tp-weather-widget"></div></el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="4">
                <el-menu theme="dark" mode="horizontal" >
                    <el-menu-item index="lockScreen" @click="lockScreen">
                        <template slot="title">
                            <i class="fa fa-lock" aria-hidden="true" />
                            &nbsp;锁屏
                        </template>
                    </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">{{ username }}</template>
                        <el-menu-item index="changePassword" @click="openChangePaswPage">
                            <template slot="title">
                                <i class="fa fa-key" aria-hidden="true" />
                                &nbsp;修改密码
                            </template>
                        </el-menu-item>
                        <el-menu-item index="logout" @click="logout">
                            <template slot="title">
                                <i class="fa fa-sign-out" aria-hidden="true" />
                                &nbsp;退出登录
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="height: 100%;">
            <el-col :span="3" style="height: 100%;background-color: #324157;">
                <el-row>
                    <div align="center">
                        <a class="img" title="我的头像" ><i class="fa fa-user-circle fa-5x" aria-hidden="true"></i><!--<img src="images/face.jpg">--></a>
                        <p>你好！<span class="userName">{{ username }}</span>, 欢迎登录</p>
                    </div>
                </el-row>

                <el-row>
                    <el-menu v-if="userPower.length > 0" ref="leftMenu" theme="dark" @select="select" :unique-opened="false">
                        <el-submenu v-for="menu in userPower" :key="menu.menu_id" :index="menu.menu_id.toString()" >
                            <template slot="title">
                                <i :class="menu.icon" aria-hidden="true" />{{ menu.title }}
                            </template>
                            <el-menu-item-group v-if="menu.children.length > 0" :closable="true">
                                <el-menu-item v-for="child in menu.children" :key="child.menu_id" icon="child.icon"
                                              :index="child.menu_id.toString()">
                                    <template slot="title">
                                        <i :class="child.icon" aria-hidden="true" />
                                        &nbsp;{{child.title}}
                                    </template>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-row>
            </el-col>
            <el-col :span="21" style="height: 100%;">
                <el-tabs style="height: 100%;" v-model="selectedTab" type="border-card"
                         @tab-remove="removeTab">
                    <el-tab-pane style="height: 100%;">
                        <span slot="label"><i class="el-icon-menu"></i> 后台首页</span>
                        <iframe src="main.html" class="frame"></iframe>
                    </el-tab-pane>
                    <el-tab-pane style="height: 100%;" :closable="true"
                            v-for="(item, index) in tabs" :key="item.menu_id" :label="item.title"
                            :name="item.menu_id.toString()">
                        <span slot="label"><i :class="item.icon" aria-hidden="true" /> {{ item.title }}</span>
                        <h3><i :class="item.icon" aria-hidden="true" />{{ item.title }}</h3>
                        <iframe :src="item.href" class="frame"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>


    <script type="text/javascript" src="/plugin/jQuery.js"></script>
    <script type="text/javascript" src="/plugin/vue.js"></script>
    <script type="text/javascript" src="/plugin/elementUI/elementUI.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script>(function(T,h,i,n,k,P,a,g,e){g=function(){P=h.createElement(i);a=h.getElementsByTagName(i)[0];P.src=k;P.charset="utf-8";P.async=1;a.parentNode.insertBefore(P,a)};T["ThinkPageWeatherWidgetObject"]=n;T[n]||(T[n]=function(){(T[n].q=T[n].q||[]).push(arguments)});T[n].l=+new Date();if(T.attachEvent){T.attachEvent("onload",g)}else{T.addEventListener("load",g,false)}}(window,document,"script","tpwidget","//widget.seniverse.com/widget/chameleon.js"))</script>
    <script>tpwidget("init", {
        "flavor": "slim",
        "location": "WX4FBXXFKE4F",
        "geolocation": "enabled",
        "language": "zh-chs",
        "unit": "c",
        "theme": "chameleon",
        "container": "tp-weather-widget",
        "bubble": "disabled",
        "alarmType": "badge",
        "color": "#FFFFFF",
        "uid": "U9EC08A15F",
        "hash": "039da28f5581f4bcb5c799fb4cdfb673"
    });
    tpwidget("show");
    </script>
</body>
</html>